<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body{
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F70%2Fec%2Fc8%2F70ecc80e886c1516105b1c218de7ac59.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647588361&t=3b2ef05dc27482790cae2b158e88bcda);
            background-size: 100%;
        }
        fieldset{
            width: 500px;
            padding: 20px;
            border: 0px  solid red;
            border-radius: 15px;
            margin: 300px;
            color: white;
        }
        a{
            margin-left: 100px;
            color: white;
        }
    </style>
</head>
<body>

<div id="app">

    <fieldset>
        <legend style="font-size: 30px">用户登录</legend>
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input                 v-model="info.username"   placeholder="手机号/账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="info.password"   placeholder="密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('info')">登录</el-button>
                <el-button                @click="resetForm('info')">重置</el-button>
            </el-form-item>
            <a href="/ssm/zhuce.html">注册</a>
            <a href="/ssm/forget.html">忘记密码</a>
        </el-form>
    </fieldset>

</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            info:{},
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ]
            }
        },
        methods:{
            submitForm(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                       $.post("/ssm/customer/login",haha.info,function (backData) {
                           window.location.href="guahao/reservation.html";
                       });
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>

</body>
</html>